<template>
  <div class="container">
    <div class="head-top">
      <span>消息中心</span>
      <img @click="$router.push({name:'My',params:{index:4}})" src="static/img/return.png" />
      <div class="read" @click="readAll()">全部已读</div>
    </div>

    <div class="listBox" >
      <div class="block" v-for="msg,index in msgList" @click="readTX(index,msg)">
        <div class="top">{{msg.date}}</div>
        <div class="msg">
          <div class="title">
            <div :class="{noRead:msg.isRead==false}"  class="circle"></div>
            <span> {{msg.message}}</span>
          </div>
          <div v-if="msg.type=='to'" class="content">
              接收方: {{msg.to}}
          </div>
          <div v-if="msg.type=='get'" class="content">
              发送方: {{msg.from}}
          </div>
          <div class="btm">
            <span>查看详情</span>
            <img src="static/img/b-right.png" alt="">
          </div>
        </div>
      </div>
      <span v-if="msgList.length<1" style="display:block;margin:3rem auto;text-align: center;font-size: 1.2rem;color:gray">
        ~
      </span>
      <!--<div class="noRead">-->
        <!--<div class="left">-->
          <!--<div >-->
            <!--转账通知: 445 HSC 转账成功-->
          <!--</div>-->
          <!--<div>-->
            <!--发送方: 0x21386782621321323...-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="right">-->
          <!--1日前-->
        <!--</div>-->
      <!--</div>-->
    </div>


  </div>

</template>


<script>
   import { Button  } from 'mint-ui';

   import  web3Util from 'ethereumjs-util';
   import Clipboard from 'clipboard'
   import {mapGetters,mapActions} from 'vuex'
   import  accountUtils from '../../service/eth/accountUtils'
  import { etherscanAK} from '../../service/eth/config'
  import axios from 'axios'
  // import  accountUtils from '../../service/accountUtils'

  export default {
    components:{

    },
    data () {
      return {
        msgList:[]
      }
    },
created(){

  this.msgList=[].concat(this.messageList)

  this.msgList.reverse()
  let date=(new Date().getTime()+'').substring(0,10);
  for(let i=0;i<this.msgList.length;i++){
    let obj=this.msgList[i];
    let timeStamp = parseInt((obj.timeStamp+'').substring(0,10));


    let subtract = date - timeStamp;

    if (subtract < 1) {
      obj.date = '1秒前';
    } else if (subtract < 60) {
      obj.date = (subtract).toFixed(0) + '秒前';
    } else if (subtract < 60 * 60) {
      obj.date = (subtract / 60).toFixed(0) + ' 分前';
    } else if (subtract > 60 * 60 && subtract < 60 * 60 * 24) {
      obj.date = (subtract / 60 / 60).toFixed(0) + ' 小时前';
    } else if (subtract > 60 * 60 * 24 && subtract < 60 * 60 * 24 * 30) {
      obj.date = (subtract / 60 / 60 / 24).toFixed(0) + ' 日前';
    } else {
      obj.date = this.formatDateTime(timeStamp * 1000);
    }
  }
},
    computed:{
      ...mapGetters(['currentAccount','wallet','accountIndex','messageList'])
    },
    methods: {
      ...mapActions(['setWallet','setAccountIndex','setMessageList']),
      copy() {
        new Clipboard('#getHash', {
          text: function(trigger) {
            Dialog.alert({
              title: '提示',
              message: '已成功复制到剪切板'
            }).then(() => {
              // on close
            });
            return trigger.getAttribute('href'); // 返回需要复制的内容
          }
        });
      },
      readTX(index,msg){
        let list=[].concat(this.msgList);
        list[index].isRead=true;
        list=list.reverse();
        this.setMessageList(list)

          this.$router.push({name:'MyTransactionInfo',params:{tran:msg.tran}})

      },
      readAll(){
        for(let i=0;i<this.msgList.length;i++){
          this.msgList[i].isRead=true
        }
        let list=[].concat(this.msgList)
        list=list.reverse()
        this.setMessageList(list)
      }
    },

    async mounted() {


    }
  }
</script>
<style lang="less" scoped>
  @import url("../../assets/css/myMessage.less");

</style>

